<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心 - 编辑影人</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <style type="text/css">
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --accent-color: #e74c3c;
            --light-bg: #f8f9fa;
            --border-color: #dee2e6;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .panel {
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 20px;
        }

        .panel-head {
            background: linear-gradient(135deg, var(--secondary-color), #1a2530);
            color: white;
            padding: 18px 20px;
            font-size: 18px;
        }

        .panel-head strong {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .body-content {
            padding: 25px;
            background: white;
        }

        .form-group {
            display: flex;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .form-group:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .label {
            width: 120px;
            padding-right: 20px;
            text-align: right;
            flex-shrink: 0;
        }

        .label label {
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 16px;
            line-height: 38px;
            margin: 0;
        }

        .field {
            flex-grow: 1;
        }

        .input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s;
        }

        .input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }

        textarea.input {
            min-height: 120px;
            resize: vertical;
        }

        .checkbox-inline, .radio-inline {
            display: inline-flex;
            align-items: center;
            margin-right: 25px;
            cursor: pointer;
            position: relative;
        }

        .checkbox-inline input, .radio-inline input {
            margin-right: 8px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .occupation-box {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            width: 100% !important;
            max-width: 500px;
            padding: 15px;
            background: var(--light-bg);
        }

        .occupation-box > label {
            margin-right: 25px;
        }

        .avatar-container {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 15px;
        }

        .avatar-preview {
            width: 120px;
            height: 120px;
            border-radius: 8px;
            border: 2px solid var(--border-color);
            overflow: hidden;
            background: #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            position: relative;
        }

        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            padding: 5px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .avatar-preview:hover .avatar-actions {
            opacity: 1;
        }

        .avatar-actions button {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 5px;
        }

        .file-upload {
            position: relative;
            display: inline-block;
        }

        .file-upload-btn {
            background: var(--primary-color);
            color: white;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background 0.3s;
        }

        .file-upload-btn:hover {
            background: #2980b9;
        }

        .file-upload input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .button {
            padding: 12px 25px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .button.border-main {
            background: var(--primary-color);
            color: white;
        }

        .button.border-main:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .button.border-red {
            background: #e74c3c;
            color: white;
        }

        .button.border-red:hover {
            background: #c0392b;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .button.border-warning {
            background: var(--warning-color);
            color: white;
        }

        .button.border-warning:hover {
            background: #e67e22;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .form-actions {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
        }

        .tips {
            color: #7f8c8d;
            font-size: 13px;
            margin-top: 6px;
        }

        .error-message {
            color: #e74c3c;
            font-size: 13px;
            margin-top: 6px;
            display: none;
        }

        .required:after {
            content: " *";
            color: #e74c3c;
        }

        .mode-indicator {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
            background: var(--primary-color);
            color: white;
        }

        .mode-edit .mode-indicator {
            background: var(--warning-color);
        }

        @media (max-width: 768px) {
            .form-group {
                flex-direction: column;
            }

            .label {
                width: 100%;
                text-align: left;
                padding-right: 0;
                margin-bottom: 10px;
            }

            .avatar-container {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>
<div class="panel admin-panel" :class="{'mode-edit': isEdit}">
    <div class="panel-head">
        <strong class="icon-reorder">
            <i class="fas fa-user-edit"></i>
            <span>编辑影人信息 </span>
        </strong>
    </div>
    <div class="padding border-bottom"></div>
    <div id="app" class="body-content">
        <form method="post" class="form-x" id="form" @submit.prevent="submit">
            <div class="form-group">
                <div class="label">
                    <label class="required">影人姓名：</label>
                </div>
                <div class="field">
                    <input type="hidden" name="id" v-model="maker.id" />
                    <input type="text" class="input" name="name" v-model="maker.name" placeholder="请输入影人姓名"
                           :class="{'error': errors.name}" @input="clearError('name')" />
                    <div class="error-message" v-if="errors.name">{{ errors.name }}</div>
                    <div class="tips">必填项，请输入影人的真实姓名</div>
                </div>
            </div>

            <!--头像-->
            <div class="form-group">
                <div class="label">
                    <label>头像: </label>
                </div>
                <div class="field">
                    <div class="avatar-container">
                        <div class="avatar-preview">
                            <img v-if="maker.avatar" :src="maker.avatar" alt="头像预览">
                            <span v-else><i class="fas fa-user fa-2x"></i></span>
                            <div class="avatar-actions" v-if="maker.avatar">
                                <button type="button" @click="removeAvatar" title="移除头像">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div>
                            <input type="text" name="avatar" class="input" v-model="maker.avatar" readonly
                                   style="width:100%; max-width:400px; margin-bottom:10px"
                                   data-toggle="hover" data-place="right" v-bind:data-image="maker.avatar"
                                   placeholder="头像URL">
                            <div class="file-upload">
                                <div class="file-upload-btn">
                                    <i class="fas fa-upload"></i>
                                    选择头像文件
                                </div>
                                <input type="file" name="file" accept="image/*" @change="uploadAvatar($event)">
                            </div>
                        </div>
                    </div>
                    <div class="tips">支持JPG、PNG格式，文件大小不超过2MB</div>
                </div>
            </div>

            <!--职业-->
            <div class="form-group">
                <div class="label">
                    <label class="required">职业:</label>
                </div>
                <div class="field">
                    <div class="occupation-box">
                        <label class="checkbox-inline">
                            <input type="checkbox" value="演员" v-model="maker.occupationList"> 演员
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="导演" v-model="maker.occupationList"> 导演
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="编剧" v-model="maker.occupationList"> 编剧
                        </label>
                    </div>
                    <div class="error-message" v-if="errors.occupation">{{ errors.occupation }}</div>
                </div>
            </div>

            <!--性别-->
            <div class="form-group">
                <div class="label">
                    <label class="required">性别:</label>
                </div>
                <div class="field">
                    <label class="radio-inline">
                        <input type="radio" value="0" v-model="maker.sex"> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" value="1" v-model="maker.sex"> 女
                    </label>
                    <div class="error-message" v-if="errors.sex">{{ errors.sex }}</div>
                </div>
            </div>

            <!--国籍-->
            <div class="form-group">
                <div class="label">
                    <label>国籍:</label>
                </div>
                <div class="field">
                    <input class="input" type="text" v-model="maker.nationality" placeholder="例如：中国、美国">
                </div>
            </div>

            <!--简介-->
            <div class="form-group">
                <div class="label">
                    <label>简介:</label>
                </div>
                <div class="field">
                    <textarea class="input" v-model="maker.info" placeholder="请输入影人的详细介绍..."></textarea>
                </div>
            </div>

            <!--获奖经历-->
            <div class="form-group">
                <div class="label">
                    <label>获奖经历:</label>
                </div>
                <div class="field">
                    <textarea class="input" v-model="maker.awardRecord" placeholder="请输入影人的获奖经历..."></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <div class="form-actions">
                        <button class="button border-main" type="submit" :disabled="submitting">
                            <i class="fas fa-check"></i>
                            {{ submitting ? '处理中...' : '提交' }}
                        </button>
                        <button class="button border-warning" type="button" @click="resetForm" v-if="!isEdit">
                            <i class="fas fa-redo"></i> 重置
                        </button>
                        <button class="button border-red" type="button" onclick="window.history.go(-1);">
                            <i class="fas fa-arrow-left"></i> 返回
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="/public/js/vue.js"></script>
<script type="text/javascript" src="/public/js/axios.js"></script>
<script type="text/javascript" src="/public/js/axios-config.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            maker: {
                id: null,
                name: '',
                avatar: null,
                occupationList: [],
                sex: null,
                nationality: '',
                info: '',
                awardRecord: ''
            },
            errors: {},
            submitting: false,
            isEdit: false,
            submitUrl: "/api/v1/maker/save",
            originalData: {}
        },
        methods: {
            uploadAvatar(event){
                if (!event.target.files.length) return;

                const file = event.target.files[0];
                // 验证文件类型和大小
                if (!file.type.match('image.*')) {
                    alert('请选择图片文件');
                    return;
                }

                if (file.size > 2 * 1024 * 1024) {
                    alert('文件大小不能超过2MB');
                    return;
                }

                const form = new FormData()
                form.append('multipartFile', file)
                let url = '/api/v1/file/upload'

                // 显示上传中状态
                const uploadBtn = event.target.previousElementSibling;
                const originalText = uploadBtn.innerHTML;
                uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 上传中...';
                uploadBtn.style.opacity = '0.7';

                axios.post(url, form)
                    .then(res => {
                        this.maker.avatar = res.data;
                        uploadBtn.innerHTML = '<i class="fas fa-check"></i> 上传成功';
                        setTimeout(() => {
                            uploadBtn.innerHTML = originalText;
                            uploadBtn.style.opacity = '1';
                        }, 2000);
                    })
                    .catch(error => {
                        console.error('Upload error:', error);
                        uploadBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> 上传失败';
                        setTimeout(() => {
                            uploadBtn.innerHTML = originalText;
                            uploadBtn.style.opacity = '1';
                        }, 2000);
                    })
            },
            removeAvatar() {
                this.maker.avatar = null;
            },
            validateForm() {
                this.errors = {};

                if (!this.maker.name || this.maker.name.trim() === '') {
                    this.errors.name = '请输入影人姓名';
                    return false;
                }

                if (!this.maker.occupationList || this.maker.occupationList.length === 0) {
                    this.errors.occupation = '请选择至少一个职业';
                    return false;
                }

                if (this.maker.sex === null || this.maker.sex === undefined) {
                    this.errors.sex = '请选择性别';
                    return false;
                }

                return true;
            },
            clearError(field) {
                if (this.errors[field]) {
                    this.errors[field] = null;
                }
            },
            submit() {
                if (!this.validateForm()) {
                    // 滚动到第一个错误处
                    const firstError = Object.keys(this.errors).find(key => this.errors[key]);
                    if (firstError) {
                        const element = document.querySelector(`[name="${firstError}"]`);
                        if (element) {
                            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            element.focus();
                        }
                    }
                    return;
                }

                this.submitting = true;

                // 准备提交数据
                const submitData = {...this.maker};
                submitData.occupation = submitData.occupationList.join("/");
                delete submitData.occupationList;

                axios.post(this.submitUrl, submitData)
                    .then(res => {
                        alert(res.message || "操作成功!");
                        if (!this.isEdit) {
                            // 添加成功后重置表单
                            this.resetForm();
                        }
                    })
                    .catch(error => {
                        console.error('Submit error:', error);
                        let message = "操作失败，请重试!";
                        if (error.response && error.response.data && error.response.data.message) {
                            message = error.response.data.message;
                        }
                        alert(message);
                    })
                    .finally(() => {
                        this.submitting = false;
                    })
            },
            resetForm() {
                if (this.isEdit) {
                    // 编辑模式下，重置为原始数据
                    this.maker = {...this.originalData};
                    this.maker.occupationList = this.maker.occupation ? this.maker.occupation.split(" / ") : [];
                } else {
                    // 添加模式下，清空表单
                    this.maker = {
                        id: null,
                        name: '',
                        avatar: null,
                        occupationList: [],
                        sex: null,
                        nationality: '',
                        info: '',
                        awardRecord: ''
                    };
                }
                this.errors = {};
            },
            loadMakerData(id) {
                let url = '/api/v1/maker/detail/' + id;
                axios.get(url)
                    .then(res => {
                        this.maker = res.data;
                        this.originalData = {...res.data};
                        this.maker.occupationList = this.maker.occupation ? this.maker.occupation.split(" / ") : [];
                        this.isEdit = true;
                        this.submitUrl = "/api/v1/maker/update";
                    })
                    .catch(error => {
                        console.error('Load maker error:', error);
                        alert('加载影人信息失败');
                    })
            }
        },
        mounted() {
            // 从URL获取id参数
            const urlObj = new URL(window.location.href);
            const params = new URLSearchParams(urlObj.search);
            const mid = params.get('id');

            if (mid) {
                this.loadMakerData(mid);
            }
        }
    })
</script>
</body>
</html>